<template>
  <view class="template-set">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
        <view class="custom-nav__back" @tap.stop="goBack">
          <view class="tn-icon-left"></view>
        </view>
        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-center tn-color-black">
            <text class="tn-text-lg tn-padding-left">设置</text>
          </view>
        </view>
      </view>
    </tn-nav-bar>

    <view class="tn-margin-top" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs" v-for="(item, index) in setList" :key="index" @click="tn(item.url)">
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg">
            {{ item.title }}
          </view>
        </view>
        <view class="justify-content-item tn-text-lg tn-color-grey">
          <view class="tn-icon-right"></view>
        </view>
      </view>
      
      
      <!-- 悬浮按钮-->
      <view class="tn-flex  tn-footerfixed">
        <view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center" @click="logoOut()">
          <tn-button shape="round" backgroundColor="tn-cool-bg-color-15" padding="40rpx 0" width="60%" shadow fontBold>
            <!-- <text class="tn-icon-light tn-padding-right-xs tn-color-black"></text> -->
            <text class="tn-color-white">退出登录</text>
            <!-- <text class="tn-icon-light tn-padding-left-xs tn-color-black"></text> -->
          </tn-button>
        </view>
      </view>
      
    </view>
    
    
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'TemplateSet',
    mixins: [template_page_mixin],
    data(){
      return {
        setList: [
        	{
        		title: "版权所属",
        		url: "/minePages/content",
        	},
        	{
        		title: "使用协议",
        		url: "/minePages/content",
        	},
        	{
        		title: "隐私政策",
        		url: "/minePages/content",
        	},
          {
          	title: "帮助中心",
          	url: "/minePages/help",
          },
        	{
        		title: "版本更新",
        		url: "/minePages/version",
        	}
        ]
      }
    },
    methods: {
      logoOut() {
        this.$store.dispatch('logout').then(() => {
          this.tn('/minePages/login')
        });
      },
      tn(url) {
      	try {
      		uni.navigateTo({
      			url,
      		});
      	} catch (e) {
      		console.error(e);
      		uni.showToast({
      			title: "跳转失败",
      			icon: "none",
      			mask: true,
      		});
      	}
      },
    }
  }
</script>

<style lang="scss" scoped>
    /* 胶囊*/
    .tn-custom-nav-bar__back {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.15);
        border-radius: 1000rpx;
        border: 1rpx solid rgba(255, 255, 255, 0.5);
        color: #FFFFFF;
        font-size: 18px;
        
        .icon {
          display: block;
          flex: 1;
          margin: auto;
          text-align: center;
        }
        
        &:before {
          content: " ";
          width: 1rpx;
          height: 110%;
          position: absolute;
          top: 22.5%;
          left: 0;
          right: 0;
          margin: auto;
          transform: scale(0.5);
          transform-origin: 0 0;
          pointer-events: none;
          box-sizing: border-box;
          opacity: 0.7;
          background-color: #FFFFFF;
        }
      }
    /* 自定义导航栏内容 start */
      .custom-nav {
        height: 100%;
        
        &__back {
          margin: auto 5rpx;
          font-size: 40rpx;
          margin-right: 10rpx;
          margin-left: 30rpx;
          flex-basis: 5%;
        }
        
        &__search {
          flex-basis: 71%;
          width: 100%;
          height: 100%;
          
          &__box {
            width: 100%;
            height: 70%;
            padding: 10rpx 0;
            margin: 0 30rpx;
            border-radius: 60rpx 60rpx 60rpx 0;
            font-size: 24rpx;
            // background-color: rgba(255,255,255,0.1);
          }
          
          &__icon {
            padding-right: 10rpx;
            margin-left: 20rpx;
            font-size: 30rpx;
          }
          
          &__text {
          }
        }
      }.tn-custom-nav-bar__back {
     width: 100%;
     height: 100%;
     position: relative;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     box-sizing: border-box;
     background-color: rgba(0, 0, 0, 0.15);
     border-radius: 1000rpx;
     border: 1rpx solid rgba(255, 255, 255, 0.5);
     color: #FFFFFF;
     font-size: 18px;
     
     .icon {
       display: block;
       flex: 1;
       margin: auto;
       text-align: center;
     }
     
     &:before {
       content: " ";
       width: 1rpx;
       height: 110%;
       position: absolute;
       top: 22.5%;
       left: 0;
       right: 0;
       margin: auto;
       transform: scale(0.5);
       transform-origin: 0 0;
       pointer-events: none;
       box-sizing: border-box;
       opacity: 0.7;
       background-color: #FFFFFF;
     }
   }
 /* 自定义导航栏内容 start */
   .custom-nav {
     height: 100%;
     
     &__back {
       margin: auto 5rpx;
       font-size: 40rpx;
       margin-right: 10rpx;
       margin-left: 30rpx;
       flex-basis: 5%;
     }
     
     &__search {
       flex-basis: 71%;
       width: 100%;
       height: 100%;
       
       &__box {
         width: 100%;
         height: 70%;
         padding: 10rpx 0;
         margin: 0 30rpx;
         border-radius: 60rpx 60rpx 60rpx 0;
         font-size: 24rpx;
         // background-color: rgba(255,255,255,0.1);
       }
       
       &__icon {
         padding-right: 10rpx;
         margin-left: 20rpx;
         font-size: 30rpx;
       }
       
       &__text {
       }
     }
   }
    /* 间隔线 start*/
    .tn-strip-bottom-min {
      width: 100%;
      border-bottom: 1rpx solid #F8F9FB;
    }
    
    .tn-strip-bottom {
     width: 100%;
     border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
    }
     /* 间隔线 end*/



  /* 底部悬浮按钮 start*/
  .tn-tabbar-height {
  	min-height: 100rpx;
  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
  }
  .tn-footerfixed {
    position: fixed;
    width: 100%;
    bottom: calc(30rpx + env(safe-area-inset-bottom));
    z-index: 1024;
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
    
  }
  /* 底部悬浮按钮 end*/
  
</style>
